<template>
    <div id="top">
        <span>DougIger's MP3</span>
        <input type="text" v-model="inputValue"
               placeholder="搜索歌曲"
               @keyup.enter="searchMusic">
        <el-button  class="search_but" icon="el-icon-search" circle @click="searchMusic"></el-button>
    </div>
</template>

<script>
    export default {
        name: "top",
        data(){
            return{
                inputValue:'',
            }
        },
        methods:{
            searchMusic(){
                if(this.inputValue==''){
                    //为空则弹出提示框
                    this.$message({
                        message:'请输入内容',
                        center:true,
                        type:'warning',
                    })
                }else{
                    //有内容则跳转
                    this.$router.push('/result?keyword='+this.inputValue);
                }
            }
        }
    }
</script>

<style scoped>
    #top{
        display: flex;
        position: fixed;
        align-items: center;
        width:100%;
        height: 60px;
        top:0;
        left: 0;
        background-color: #f9f9f9;
        z-index: 999;
        padding:20px;
        justify-content:flex-end;

    }
    #top>span{
        position:absolute;
        left: 20px;
        font-size: 25px;
        font-weight: bold;
        color: #A6B0D9;
    }
    #top>img{
        width: 85%;
    }
    .search_but{
        margin-left: 10px;

    }

</style>